<template>
	<scroll-view scroll-y class="advise-big-box flex-column flex-aligin-items-center">
		<view class="flex-column flex-center big-box">
			<view class="navbar-box flex-row flex-center">
				<view class="vbox-left flex-column flex-center" name="advisepage" @click="vadvise(0)">
					<text class="fun-font-12px v-size" v-bind:class="{vbox:advisecolor}">建议</text>
				</view>
				<view class="vbox-right flex-column flex-center" name="complainpage" @click="vcomplain(1)">
					<text class="fun-font-12px v-size" v-bind:class="{vbox:!advisecolor}">投诉</text>
				</view>
			</view>
		</view>
		<view class="advise-phone flex-column flex-aligin-items-center">
			<view class="repair-verify flex-row">
				<text class="symbol-size">{{symbol}}</text>
				<text class="fun-font-14px verify-text">姓名</text>
				<input placeholder="请输入姓名" v-model="rule.username" class="fun-font-14px input-text" />
			</view>
			<view class="repair-verify flex-row">
				<text class="symbol-size">{{symbol}}</text>
				<text class="fun-font-14px verify-text">手机号</text>
				<input placeholder="请输入手机号" v-model="rule.phonenumber" maxlength="11" class="fun-font-14px input-text" />
			</view>
			<view class="repair-verify-number flex-row">
				<text class="symbol-size">{{symbol}}</text>
				<text class="fun-font-14px verify-vtext">验证码</text>
				<input placeholder="请输入验证码" v-model="rule.verify" class="fun-font-14px input-text" />
				<view class="v-btn">
					<button class="btn-box fun-img fun-font-12px " v-show="isgetCode" plain="flase" @click="verifybtn(rule)">获取验证码</button>
					<view v-show="!isgetCode" v-bind:class="{active:isActive}" class="bt-prepare fun-font-10px">
						<text v-show="isActive" @click="verifybtn(rule)">重新获取</text>
						<text v-show="!isActive" style="color: #888888;">{{count}}s后重新获取</text>
					</view>
				</view>
			</view>
		</view>
		<view v-show="advisecontent" plain="flase" class="advise-conent flex-column flex-aligin-items-center">
			<view class="content-box">
				<view class="content-box-header flex-row">
					<text class="symbol-size">{{symbol}}</text>
					<text class=" fun-font-14px">{{advisetext}}</text>
				</view>
				<view class="content-box-text">
					<textarea name="contenttextarea" class="contenttextarea flex-center fun-font-14px" placeholder="请填写建议内容" maxlength="500"
					 @input="descInput" v-model="rule.areadesc" />
					<view class="num fun-font-10px">{{textcount}}/500</view>
				</view>
			</view>
		</view>
		<view v-show="!advisecontent" class="advise-conent flex-column flex-aligin-items-center">
			<view class="content-box">
				<view class="content-box-header flex-row">
					<text class="symbol-size">{{symbol}}</text>
					<text class=" fun-font-14px">投诉内容</text>
				</view>
				<view class="content-box-text">
					<textarea name="contenttextarea" class="contenttextarea flex-center fun-font-14px" placeholder="请填写投诉内容" maxlength="500" @input="descInput"
					 v-model="rule.areadesc" />
					<view class="num fun-font-10px">{{textcount}}/500</view>
				</view>
			</view>
		</view>
		<view class="adviseimgtext flex-center">
			<view class="width-90 flex-column">
				<text class="fun-font-14px width-100">{{adviseimg}}</text>
				<text class="fun-font-14px width-100"  style="color: red;">请使用横屏拍照，以保证照片显示正确</text>
				<text class="fun-font-13px font-color-999 width-100">{{adviseimgtext}}</text>
			</view>
		</view>
		<view class="width-100 flex-center">
			<view class="width-95 img-up">
			<sunui-upbasic :upload_count="5" :upImgConfig="upImgBasic" @onUpImg="upBasicData" @onImgDel="delImgInfo" ref="uImage"></sunui-upbasic>
			</view>
		</view>
		<view class="advise-btn flex-center">
			<button class="btn-size fun-img fun-font-16px" @click="advisebtn">{{submit}}</button>
		</view>
	</scroll-view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import sunuiUpbasic from '@/components/sunui-upimg/sunui-upbasic.vue'
	import	{sendEvaluateCode,verifyEvaluateCode,createAdvise,getRepairList}from '@/api/user/index.js'
	import config from '@/utils/config.js'
	import {setUserInfoSync,getUserInfoSync} from '@/utils/store.js'
	export default {
		components:{sunuiUpbasic,uniNavBar},
		data() {
			return {
				symbol:'*',
				advisecolor:true,
				advisecontent:true,
				advisetext:'建议内容',
				adviseconten:'请填写建议内容',
				adviseimg:'添加图片',
				adviseimgtext:'注：请上传(清晰)图片,上传图片不得超过5张',
				submit:'提交',
				textcount:0,
				count:0,
				isgetCode: true,
				isActive: false,
				rule: {
					equipment_id:'',//存储缓存中的设备id
					repair_id:'',//	报修单id
					phonenumber: '',//手机号
					username: '',  //姓名
					areadesc: '',  // 内容
					verify: '',		// 输入的验证码
					type:0,
					user_code: 0,
					file:[]
				},
				sendcode:'',//手机获取的验证码
				basicArr: [],
				// 基础版配置
				upImgBasic: {
				// 后端图片接口地址
				basicConfig: {
					url: config.BaseUrl +'/evaluate_user?action=UploadFile'
				},
				// 是否开启提示(提醒上传图片的数量)
				// tips: false,
				// 是否开启notli(开启的话就是选择完直接上传，关闭的话当count满足数量时才上传)
				notli: true,
				// 图片数量
				count: 5,
				// 相机来源(相机->camera,相册->album,两者都有->all,默认all)
				sourceType: 'all',
				// 是否压缩上传照片(仅小程序生效)
				sizeType: true,
				// 上传图片背景修改 
				upBgColor: '#EDEDED',
				// 上传icon图标颜色修改(仅限于iconfont)
				upIconColor: '#666',
				// 上传svg图标名称
				// upSvgIconName: 'icon-card',
				// 上传文字描述(仅限四个字)
				// upTextDesc: '上传证书',
				// 删除按钮位置(left,right,bleft,bright),默认右上角
				delBtnLocation: '',
				// 是否隐藏添加图片
				// isAddImage: false,
				// 是否隐藏删除图标
				// isDelIcon: false,
				// 删除图标定义背景颜色
				// delIconColor: '',
				// 删除图标字体颜色
				// delIconText: '',
				// 上传图标替换(+),是个http,https图片地址(https://www.playsort.cn/right.png)
				iconReplace: '',
			}
		};
	},
	
		onLoad(op) {
		  /* 获取报修id：repair_id*/
		  /* 获取并存入设备id*/
		  /* 将id存入this.$store.dispatch('setInfo', info)*/
		  /* 获取缓存中的id 	this.$store.getters.getEquipmentInfo或this.$store.getters.getEquipmentInfo.engineer_id */
		  this.rule.equipment_id = this.$store.getters.getEquipmentInfo.id
		  this.rule.repair_id = this.$store.getters.getRepairId
		  console.log(this.rule.repair_id)
		/* this.$store.dispatch('setRpId',id) */
		  this.echo()
		
		},
		methods: {
			/**
			 * 保存提交人信息,避免下次提交时需要重新输入
			 */
			echo(){
				this.rule.phonenumber = getUserInfoSync()?JSON.parse(getUserInfoSync()).phonenumber:''
				this.rule.username = getUserInfoSync()?JSON.parse(getUserInfoSync()).username:''
			},
			
			//文字计数
			descInput(e){
				this.textcount = e.detail.value.length
			 },
						
			/* 倒计时 */
			/* 验证码发送加倒计时 */
			verifybtn(rule) {
				let loginRules = [
				  {name: 'phonenumber', required: true, type: 'phone', errmsg: '请输入正确的手机号'}
				]
				let valLoginRes = this.$validate.validate(this.rule, loginRules) 
				 if (!valLoginRes.isOk) {
				  uni.showToast({
				    icon: 'none',
				    title: valLoginRes.errmsg
				  });
				  }else{
					  this.isgetCode = false;
					  if (!this.timer) {
					  	this.count = 60;
					  	this.isActive = false;
					  	this.timer = setInterval(() => {
					  		if (this.count > 0 && this.count <= 60) {
					  			this.count--;
					  		} else {
					  			this.isActive = true;
					  			clearInterval(this.timer);
					  			this.timer = null;
					  		}
					  	}, 1000);
					  }
					  sendEvaluateCode(rule.phonenumber).then((res) =>{
						  this.sendcode = res.result.code
						  this.rule.user_code = res.result.code
						  console.log(res)
					  })
				  }
			},
			
			/* 头部转换按钮 */
			vadvise(e){
				this.rule.type = e;
				this.advisecontent = true;
				this.advisecolor = true;
			},
			/* 头部转换按钮 */
			vcomplain(e){
				this.rule.type = e;
				this.advisecontent = false;
				this.advisecolor = false;
			},
			/* 表单验证 */
			validate() {
				let loginRules = [{
						name: 'username',
						type: 'required',
						errmsg: '姓名不能为空'
					},
					{
						name: 'phonenumber',
						required: true,
						type: 'phone',
						errmsg: '请输入正确的手机号'
					},
					{
						name: 'verify',
						type: 'required',
						errmsg: '验证码不能为空'
					},
					{
						name: 'verify',
						type: 'lengthRange',
						min: 6,
						max: 6,
						errmsg: '请输入6位有效验证码'
					},
					{
						name: 'areadesc',
						type: 'required',
						errmsg: '填写建议或投诉内容不能为空'
					},
				]
				let valLoginRes = this.$validate.validate(this.rule, loginRules)
				if (!valLoginRes.isOk) {
					uni.showToast({
						icon: 'none',
						title: valLoginRes.errmsg
					});
					return false
				}
				return true
			},
			
			// 删除图片 -2019/05/12(本地图片进行删除)
			async delImgInfo(e) {
				console.log('你删除的图片地址为:', e, this.rule.file.splice(e.index, 1));
			},
			// 基础版
			async upBasicData(e) {
				console.log('===>',e);
				// 上传图片数组
				let arrImg = [];
				for (let i = 0, len = e.length; i < len; i++) {
					try {
						if (e[i].path_server != "") {
							await arrImg.push(e[i].path_server.split(','));
						}
					} catch (err) {
						console.log('上传失败...');
					}
				}
				// 图片信息保存到data数组
				this.rule.file = arrImg;
				// 可以根据长度来判断图片是否上传成功. 2019/4/11新增
				if (arrImg.length == this.upImgBasic.count) {
					uni.showToast({
						title: `上传成功`,
						icon: 'none'
					});
				}
			},
			// 获取上传图片basic
			getUpImgInfoBasic() {
				console.log('后端转成一维数组:', this.rule.file.join().split(','));
			},
			
			/* 创建投诉或建议表 */
			advisebtn(rule){
				uni.showLoading({
				    title: '加载中'
				});
				this.rule.file = this.rule.file.join().split(',')
				console.log(this.rule.file)
				if (this.validate()) {
					verifyEvaluateCode(this.sendcode, this.rule.verify).then((res) => {
						console.log(res)
						if (res.code === 1) {
							createAdvise(this.rule).then((res) => {
								console.log(res)
								if (res.code === 1) {
									setUserInfoSync({phonenumber:this.rule.phonenumber,username:this.rule.username})
									setTimeout(function () {
									   uni.hideLoading();
										 uni.showToast({
											title: '提交成功',
											icon:'success',
											duration: 1000,
											success: () => {
												setTimeout(()=>{
													uni.redirectTo({
														url: '/pages/index/repair/repairmaster',
														})
												},1000)
												
											}
										 });
									}, 2000);
								}
							})
						}
					})
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
.advise-big-box{
	width: 100%;
	height: calc( 100vh - 44px );
	/* height: 100%; */
	background-color: #ffffff;
	.big-box{
		width: 100%;
		height: 115rpx;
		background-color: #FFFFFF;
		.navbar-box{
			width: 90%;
			height: 100rpx;
			background-color: #FFFFFF;
			.vbox-left{
				width: 30%;
				height: 60rpx;
				
				.v-size{
					width: 100%;
					line-height: 60rpx;
					text-align: center;
					border: 3rpx solid #09b707;
				}
				
			}
			.vbox-right{
				width: 30%;
				height: 60rpx;
				
				.v-size{
					width: 100%;
					line-height: 60rpx;
					text-align: center;
					border: 3rpx solid #09b707;
				}	
			}
			.vbox{
					color: #FFFFFF;
					background-color:#39B54A;
				}
		}
		}
	.advise-type{
		width: 90%;
	    height: 140rpx;
		padding: 20rpx 0;
		background-color: #FFFFFF;
		.type-text{
			width: 100%;
			line-height: 60rpx;
		}
		.sbox:active{
		color: #000000;
		}
		.active {
			font-size: 13rpx;
			color: #1AAD19;
			border: 2rpx solid #1AAD19;
		}
		.type-box{
			height: 140rpx;
			width: 90%;
			padding: 20rpx 0;
			background-color: #FFFFFF;
				.sbox{
					width: 65%;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					display: inline-block;
					font-size: 22rpx;
					border: 2rpx solid #D6D5D6;
					border-radius: 10rpx;
					margin: 20rpx;
				}
			
			}
		}
	
	.advise-conent{
	    width: 100%;
		height: 380rpx;
	    background-color: #ffffff;
		
		.content-box{
			height: 380rpx;
			width: 90%;
			background-color: #FFFFFF;
			border-bottom: 3rpx solid #efeff4;
		 .content-box-header{
			 width: 100%;
			 height: 75rpx;
			 line-height: 75rpx;
			 border-bottom: 2rpx solid #efeff4;
			 .symbol-size{
					width: 3%;
					text-align: center;
					color: #e22018;
				}
				
			}
		 .content-box-text{
			 width: 100%;
			 height: 280rpx;
			 margin-top:10rpx;
			 background-color: #ffffff;
			 .contenttextarea{
				 width: 100%;
				 height: 260rpx;
			 }
			.num{
				width: 100%;
				display: flex;
				color: #666666;
				background-color: #ffffff;
				flex-direction: row-reverse;
				justify-content: flex-start;
				}
		 }
	   }
	}
	
	.advise-phone{
		width: 100%;
		background-color: #FFFFFF;
		.repair-verify{
			width: 90%;
			height: 75rpx;
			border-bottom: 2rpx solid #f1f1f1;
			.symbol-size{
				width: 3%;
				color: #e22018;
			}
			.verify-text {
				width: 15%;
				line-height: 75rpx;
			}
		
			.input-text {
				width: 50%;
				line-height: 75rpx;
				text-indent: 20rpx;
			}
		}
		.repair-verify-number {
			width: 90%;
			height: 75rpx;
			border-bottom:2rpx #f1f1f1 solid ;
			.symbol-size{
				width: 3%;
				color: #e22018;
			}
			.verify-vtext {
				width: 15%;
				line-height: 75rpx;
			}
		
			.input-text {
				width: 50%;
				line-height: 75rpx;
				text-indent: 20rpx;
			}
		
			.v-btn {
				text-align: center;
				width: 30%;
				height: 55rpx;
				color: #FFFFFF;
		
				.btn-box {
					line-height: 55rpx;
					text-align: center;
					width: 200rpx;
					color: #FFFFFF;
					background-color: #3CC51F;
					border: 0 solid #FFFFFF;
				}
		
				.bt-prepare {
					color: #000000;
					background-color: #FFF;
					line-height: 55rpx;
					font-size: 28rpx;
					text-align: center;
				}
		
				.active {
					color: #3cc51f;
					line-height: 55rpx;
					background-color: #FFFFFF;
				}
			}
		}
	}
	
	.adviseimgtext{
		width: 100%;
		padding-top: 10rpx;
		background-color: #FFFFFF;
		}
	
	
	.img-up{
		height: 400rpx;
	}
	.advise-btn{
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		.btn-size{
			height: 75rpx;
			width: 90%;
			color: #FFFFFF;
			text-align: center;
			line-height: 75rpx;
			background-color: #09bb07;
		}
	}
}
</style>
